<template>
  <div class="home">
    <div style="width: 100%">
      <h2 style="text-align: center">参与投标</h2>
      <el-table :data="list.data" style="width: 100%">
        <el-table-column align="center" label="序号" type="index" width="100">
        </el-table-column>
        <el-table-column prop="title" label="标的发布名称">
            <template slot-scope="scope">
            <span class="pointer" @click="goToNoticeDetails(scope.row.announcementId)">
                {{ scope.row.title }}</span>
          </template>
        </el-table-column>


        <el-table-column
          width="150"
          prop="endTime"
          label="投标结束时间"
        >
        <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.endTime }}</span>
          </template>
        </el-table-column>
        <el-table-column width="100" prop="title" label="操作">
          <template slot-scope="scope">
            <el-button
              :disabled="scope.row.bidType != 5"
              @click="signUp(scope.row)"
              type="text"
              >报 名</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="this.total"
        :page-size="pageSize"
        :current-page.sync="currentPage"
        @current-change="getList"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {getMarkList,signUp} from '@/api/procurement/Mark'
export default {
   data (){
   return{
    list: [],
    userRes: {},
    total: 0,
    pageSize: 5,
    currentPage: 1
   }
},
 mounted() {
    this.userRes = this.$store.state.user.userRes;
    this.getList();
  },
methods:{
    bidType(type){
        if(type == 0){
            return "报名成功";
        }else if(type == 1){
            return "已过期";
        }else if(type == 2){
            return "资质审核";
        }else if(type == 3){
            return "待开标";
        }else if(type == 4){
            return "开标结果";
        }else if(type == 5){
            return "未报名";
        }
    },
// 获取列表
getList() {
    getMarkList({
        pageIndex: this.currentPage,
        pageSize: this.pageSize,
    }).then((res) =>{
        this.list = res;
    })
},
// 跳转详情页
goToNoticeDetails(id) {
   this.$router.push({
    name: "noticeDetails",
    query: {
        listId: id
    }
   })
},
// 报名按钮
signUp(item){
    signUp({
        bidId: item.markId, userId: this.userRes.userId
    }).then((res) =>{
        if(res.code == 200) {
            this.$message.success('报名成功')
        }else {
             this.$message.warning(res.mes)
        }
        this.getList()
    })
}
}
}
</script>

<style scoped>
.el-pagination {
float: right;
margin-top: 20px;
}
</style>